<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="app.css">
    <title>practice</title>
</head>
<body>
<div class="full row bg-white rtl">
    <div class="width-32 column">
        <div class="height-48px center">قوشۇش ۋە تەھرىرلەش</div>
        <div class="bg-gray3" style="height: 1px;"></div>
        <div class="margin-lr-16px margin-tb-16px">تاماق نامى:</div>
        <input id="#name" class="margin-lr-16px height-28px radius-all-48px padding-lr-16px">
        <div class="margin-lr-16px margin-tb-16px">تاماق رەسىمى:</div>
        <input id="#image" class="margin-lr-16px height-28px radius-all-48px padding-lr-16px">
        <div class="margin-lr-16px height-28px radius-all-48px padding-lr-16px button txt-white"></div>
        <div class="row margin-8px height-32px vertical-center">
            <div>تاماق باھاسى:</div>
            <div class="row bg-gray1 full-height space-full radius-all-48px margin-lr-8px vertical-center">
                <input id="#bahasi" class="width-86 height-64 margin-lr-8px bg-transparent txt-center txt-orange8" type="number" style="border: none" value="0"/>
                <div class="margin-lr-8px">يۈەن</div>
            </div>
        </div>
        <div onclick="saklax()" class="height-48px bg-blue margin-16px radius-all-48px button txt-white">ساقلاش</div>
    </div>
    <div class="bg-gray3" style="width: 1px;"></div>
    <div class="space-full column">
        <div class="height-48px row vertical-center">
            <input id="#keyword" class="txt-center bg-gray1 space-full height-28px margin-lr-8px radius-all-48px">
            <div onclick="izdax()" class="bg-blue width-96px height-28px radius-all-48px txt-white button margin-lr-8px">ئىزدەش</div>
        </div>
        <div class="bg-gray3 " style="height: 1px;"></div>
        <div id="#tizimlik" class="row-wrap">

        </div>
    </div>
</div>
<script>
    let tamaklar = [];
    let nowattiki_tamak_id = 0;

    function izdax() {

    }

    //ساقلاش
    function saklax() {
        let ismim = document.getElementById("#name");
        let rasmi = document.getElementById("#image");
        let bahasi = document.getElementById("#bahasi");
        if (ismim.value === "") {
            alert('ئىسمىنى كىرگۈزۈپ بەسلە');
            return;
        }
        if (rasmi.value === "") {
            alert('رەسىمىنى كىرگۈزۈپ بەسلە');
            return;
        }
        if (nowattiki_tamak_id > 0) {
            let index = tamaklar.findIndex(tamak => tamak.id === nowattiki_tamak_id);
            tamaklar[index].isim = ismim.value;
            tamaklar[index].rasmi = rasmi.value;
            tamaklar[index].bahasi = bahasi.value;
            nowattiki_tamak_id = 0;
        } else {
            tamaklar.push({
                isim: ismim.value,
                bahasi: bahasi.value,
                id: tamaklar.length + 1,
                rasmi: rasmi.value
            });
        }
        yiglash();
        ismim.value = "";
        rasmi.value = "";
        bahasi.value = 0;
        alert('ساقلاندى');
    }

    // تاماق ئۇچۇرىنى ئۆزگەرتىش
    function update(id) {
        nowattiki_tamak_id = id;
        let index = tamaklar.findIndex(tamak => tamak.id === id);
        let tamak = tamaklar[index];
        let ismim = document.getElementById("#name");
        let rasmi = document.getElementById("#image");
        let bahasi = document.getElementById("#bahasi");
        ismim.value = tamak.isim;
        rasmi.value = tamak.rasmi;
        bahasi.value = tamak.bahasi;
    }

    // تاماقنى ئۆچۈرۈش
    function deleteTamak(id) {
        let index = tamaklar.findIndex(tamak => tamak.id === id);
        tamaklar.splice(index, 1);
        yiglash();
    }

    //كۆرۈنمە يۈزدىكى تىزىملىكنى يىڭىلاش
    function yiglash() {
        let tizimlik = document.getElementById("#tizimlik");
        let tizimlik_html = "";
        tamaklar.forEach(tamak => {
            tizimlik_html += `<div class="width-128px height-172px bg-gray1 margin-8px radius-all-8px column overflow-hidden">`;
            tizimlik_html += `<img class="margin-8px radius-all-8px" src="${tamak.rasmi}">`;
            tizimlik_html += `<div class="space-full bg-white column margin-bottom-8px margin-lr-8px radius-all-8px">`;
            tizimlik_html += `<div class="center">${tamak.isim}</div>`;
            tizimlik_html += `<div class="row space-full">`;
            tizimlik_html += `<div class="space-full button txt-yellow9" onclick="update(${tamak.id})">ئۆز</div>`;
            tizimlik_html += `<div class="space-full button txt-red" onclick="deleteTamak(${tamak.id})">ئۆچ</div>`;
            tizimlik_html += `<div class="space-full center txt-orange8">${tamak.bahasi}￥</div>`;
            tizimlik_html += `</div></div></div>`;
        });
        tizimlik.innerHTML = tizimlik_html;
    }
</script>
</body>
</html>